<template>
    <div class="center-main">
        <section class="order-main-header">
            <mt-header title="锁仓">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        </section>
        <section class="proposal">
            <div  class="flex" >
                <div> 锁仓类型</div>{{lockChoose}}
                 <!-- <div  class="rotate" @click="sheetVisibleChange()">  <img src="../../assets/my/right.png"></div> -->
            </div>
            <div  class="flex" >
                <div style="margin-right:20px"> 锁仓数量</div><input type="number" :disabled="applyStatus" v-model="lockNum">
                 <!-- <div @click="all()"> 全部 </div> -->
            </div>
        </section>
        <div class="apply-able">
            <span>可用： {{balancesValue.total}}   {{currentChoose.fShortName}}</span>
        </div>
        <button class="total-btn" @click="sureLock()">确定</button>
         <mt-actionsheet
        :actions="actions"
       v-model="sheetVisible">
        </mt-actionsheet>
    </div>
</template>
<script>
import axios from 'axios';
import { Actionsheet } from 'mint-ui';
import { Toast } from 'mint-ui';
export default {
    name:'my',
   data(){
         return {
         sessionData:'',
         rewards:'',
          sheetVisible:false,
               actions: [],
             lockName:'',
             lockNum:'',
             applyVal:'',
             applyStatus:false,
             lockChoose:'',
             lockTypeId:'',
             currentChoose:'',
             balancesValue:""
         }
    },
    mounted() {
        this.$http.post('v1/session?'+ new Date().getTime(),).then((res)=>{
            this.sessionData=res.data.data;
        })
       this.getOtcList();
    },
    methods: {
         getBalances(current){
            this.$http.post('v1/account/balances').then((res)=>{
                    this.balancesValue=res.data.data.filter(item=>{
                        return item.id==current.coinId;
                    })[0];
                           this.getLockAllType(current);
            })
        },
        sheetVisibleChange(){
            this.sheetVisible=!this.sheetVisible;
        },
        sureLock(){
            let param={
                lockNum:this.lockNum,
                userId: this.sessionData.id,
                fViFId:this.currentChoose.coinId,
                lockTypeId:this.lockTypeId
            }
            this.$http.post('/v2/lock/saveLock',param).then((res)=>{
                console.log(res.data)
                if(res.data.code==0){
                   Toast("锁仓成功");
                } if(res.data.code==10009){
                   Toast(res.data.msg);
                }
             })
        },
          getOtcList(){this.$http.post('/v2/market/allcoins',).then((res)=>{
                let tickers = res.data;
                 let coinGroup = {}
                    let param = location.hash.match(new RegExp(".*" + 'symbol' + "=([^\&]*)(\&?)", "i"));
                    let symbol = param && !isNaN(param[1]) ? param[1] : 0;
                    let current = null;
                    for (let i = 0; i < tickers.length; i++) {
                        let ticker = tickers[i]
                        if(ticker.report){
                            current = ticker
                        }
                    }
                    this.currentChoose=current;
                     this.getBalances(current);
                     
             })
          },
         getLockAllType(current){
            this.$http.post('v2/lock/getAllType',{fViFId:current.coinId}).then((res)=>{
                 if(res.data.code==0){
                     let data=res.data.data;
                     if(data==null){
                         return
                     }
                 this.actions= data;
                   for (let i = 0; i <  data.length; i++) {
                          this.actions[i]["name"]=data[i].lockName;
                           this.actions[i]["method"]=this.typeChange;
                   }
                    this.applyVal=data[0].lockUsdt;
                    this.lockChoose=data[0].lockName;
                    this.lockTypeId=data[0].id;
                   if(data[0].lockName=='信仰锁仓'){
                      this.applyStatus=true;
                      this.lockNum=data[0].lockUsdt;
                   }
                 }
                })
            },
            all(){
               this.lockNum= this.balancesValue.total;
            },
        typeChange(val){
            this.lockName=val.lockName;
             this.sheetVisible=false;
             this.lockChoose=val.lockName;
             this.applyVal=val.lockUsdt;
            this.lockTypeId=val.id;
            if(val.name=='信仰锁仓'){
                this.applyStatus=true;
            }else{
                  this.applyStatus=false;
                  this.lockNum='';
            }
        },
        handleClose(){
                this.$router.go(-1);
            },
    },
}
</script>
<style lang="less" scoped>
.mint-header {
    height: 100px;
    font-size: 32px;
    background-color: #222240 ;
    color: #E0E0F9;
}
.proposal{
    a{
        color: #8686C0;
    }
    .flex{
        height:96px;
        background:rgba(34,34,64,1);
          display: flex;
        justify-content: space-between;
        margin-bottom: 2px;
          align-items: center;
          padding-left: 30px;
          padding-right: 30px;
          img{
              margin-right: 30px;
          }
    }
}
    .center-main{
        color: #8686C0;
    }
.flex-between{
    display: flex;
justify-content: space-between;
}
.rotate{
    transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
-mz-transform:rotate(-180deg);
img{
    width: 30px;
    height: 30px;
}
}
.order-main-header header{
    width: 100%;
}
 .total-btn {
            display: block;
            width: 90%;
            line-height: 58px;
            font-size: 30px;
            text-align: center;
            margin:0 auto;
            margin-bottom: 0;
            border-radius: 4px;
            height:86px;
            font-size:32px;
            color: #FFFFFF;
            z-index: 10001;
            background:rgba(82,152,241,1);
        border-radius:10px;
    }
       input{
                line-height: 60px;
                border:none;
                background:none;  
                outline:none;  
                font-size: 30px;
                height: 60px;
                flex: 1;
                color: #E0E0F9;
            }
            .apply-able{
                height: 80px;
                line-height: 60px;
                padding-left: 30px;
                color: rgba(82, 152, 241, 1);
            }
</style>